<template>
  <div>
    <div class="rank-title"> 产品销量排行Top101 </div>
    <div id="tagscloud">
      <a
        v-for="item in randomArr"
        :key="item.comboId"
        href="#"
        :style="{
          fontSize: item.fontSize + 'px',
          color: item.color
        }"
        >{{ item.comboName }}</a
      >
    </div>
  </div>
</template>
<script setup>
import { topSalesApi } from '@/api/statistic'
import usePermissionStore from '@/store/modules/permission'

var dtr = Math.PI / 180
const per = ref(0)
const randomArr = ref([])
const timer = ref(null)
const timer2 = ref(null)

const sa = ref(0)
const ca = ref(0)
const sb = ref(0)
const cb = ref(0)
const sc = ref(0)
const cc = ref(0)
function sineCosine(a, b, c) {
  sa.value = Math.sin(a * dtr)
  ca.value = Math.cos(a * dtr)
  sb.value = Math.sin(b * dtr)
  cb.value = Math.cos(b * dtr)
  sc.value = Math.sin(c * dtr)
  cc.value = Math.cos(c * dtr)
}

onMounted(() => {
  const flag = usePermissionStore().routes.find((i) => i.name == 'Screen')
  if (!flag) {
    return
  }
  init()
  timer.value = setInterval(() => {
    init()
  }, 30000)
})

function init() {
  topSalesApi().then((res) => {
    if (JSON.stringify(randomArr.value) !== '[]' && JSON.stringify(randomArr.value) !== res?.data) {
      return
    }
    randomArr.value = res?.data || []
    const fontSizes = [33, 27, 25, 23, 21, 19, 17, 15, 13, 11]
    const colors = [
      '#50FFED',
      '#49B2FF',
      '#50FFED',
      '#FF9F1B',
      '#FF9F1B',
      '#49B2FF',
      '#49B2FF',
      '#056AB5',
      '#056AB5',
      '#50FFED'
    ]
    randomArr.value = res?.data.map((item, index) => {
      return {
        ...item,
        fontSize: fontSizes[index],
        color: colors[index]
      }
    })
    nextTick(() => {
      var radius = 90
      var d = 200
      var mcList = []
      var lasta = 1
      var lastb = 1
      var distr = true
      var tspeed = 11
      var size = 200
      var mouseX = 0
      var mouseY = 10
      var howElliptical = 1
      var aA = null
      var oDiv = null
      var i = 0
      var oTag = null
      oDiv = document.getElementById('tagscloud')
      if (!oDiv) return
      aA = oDiv.getElementsByTagName('a')
      for (i = 0; i < aA.length; i++) {
        oTag = {}
        // aA[i].onmouseover = (function (obj) {
        //   return function () {
        //     obj.on = true
        //     this.style.zIndex = 9999
        //     this.style.filter = 'alpha(opacity=100)'
        //     this.style.opacity = 1
        //   }
        // })(oTag)
        // aA[i].onmouseout = (function (obj) {
        //   return function () {
        //     obj.on = false
        //     this.style.zIndex = obj.zIndex
        //     this.style.filter = 'alpha(opacity=' + 100 * obj.alpha + ')'
        //     this.style.opacity = obj.alpha
        //     this.style.zIndex = obj.zIndex
        //   }
        // })(oTag)
        oTag.offsetWidth = aA[i].offsetWidth
        oTag.offsetHeight = aA[i].offsetHeight
        mcList.push(oTag)
      }
      sineCosine(0, 0, 0)
      var phi = 0
      var theta = 0
      var max = mcList.length
      for (var i = 0; i < max; i++) {
        if (distr) {
          phi = Math.acos(-1 + (2 * (i + 1) - 1) / max)
          theta = Math.sqrt(max * Math.PI) * phi
        } else {
          phi = Math.random() * Math.PI
          theta = Math.random() * (2 * Math.PI)
        }
        //坐标变换
        mcList[i].cx = radius * Math.cos(theta) * Math.sin(phi)
        mcList[i].cy = radius * Math.sin(theta) * Math.sin(phi)
        mcList[i].cz = radius * Math.cos(phi)
        const left1 = mcList[i].cx + oDiv.offsetWidth / 2 - mcList[i].offsetWidth / 2
        if (mcList[i].offsetWidth + left1 > 394) {
          aA[i].style.left = left1 - (left1 + mcList[i].offsetWidth - 394) + 'px'
        } else {
          aA[i].style.left = mcList[i].cx + oDiv.offsetWidth / 2 - mcList[i].offsetWidth / 2 + 'px'
        }
        aA[i].style.top = mcList[i].cy + oDiv.offsetHeight / 2 - mcList[i].offsetHeight / 2 + 'px'
      }
      ;(function () {
        var a,
          b,
          c = 0
        a = (Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed
        b = (-Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed
        lasta = a
        lastb = b
        if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
          return
        }
        sineCosine(a, b, c)
        for (var i = 0; i < mcList.length; i++) {
          if (mcList[i].on) {
            continue
          }
          var rx1 = mcList[i].cx
          var ry1 = mcList[i].cy * ca.value + mcList[i].cz * -sa.value
          var rz1 = mcList[i].cy * sa.value + mcList[i].cz * ca.value
          var rx2 = rx1 * cb.value + rz1 * sb.value
          var ry2 = ry1
          var rz2 = rx1 * -sb.value + rz1 * cb.value
          var rx3 = rx2 * cc.value + ry2 * -sc.value
          var ry3 = rx2 * sc.value + ry2 * cc.value
          var rz3 = rz2
          mcList[i].cx = rx3
          mcList[i].cy = ry3
          mcList[i].cz = rz3
          per.value = d / (d + rz3)
          mcList[i].x = howElliptical * rx3 * per.value - howElliptical * 2
          mcList[i].y = ry3 * per.value
          mcList[i].scale = per.value
          var alpha = per.value
          alpha = (alpha - 0.6) * (10 / 6)
          mcList[i].alpha = alpha * alpha * alpha - 0.2
          mcList[i].zIndex = Math.ceil(100 - Math.floor(mcList[i].cz))
        }
        var l = oDiv.offsetWidth / 2
        var t = oDiv.offsetHeight / 2
        for (var i = 0; i < mcList.length; i++) {
          if (mcList[i].on) {
            continue
          }
          var aAs = aA[i].style
          if (mcList[i].alpha > 0.1) {
            if (aAs.display != '') aAs.display = ''
          } else {
            if (aAs.display != 'none') aAs.display = 'none'
            continue
          }
          const left2 = mcList[i].cx + l - mcList[i].offsetWidth / 2
          aAs.top = mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px'
          if (mcList[i].offsetWidth + left2 > 394) {
            aAs.left = left2 - (left2 + mcList[i].offsetWidth - 394) + 'px'
          } else {
            aAs.left = left2 + 'px'
          }
          //aAs.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';
          //aAs.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+100*mcList[i].alpha+")";
          aAs.filter = 'alpha(opacity=' + 100 * mcList[i].alpha + ')'
          aAs.zIndex = mcList[i].zIndex
          aAs.opacity = mcList[i].alpha
        }
        if (timer2.value) {
          clearInterval(timer2.value)
        }
        timer2.value = setInterval(() => {
          var a,
            b,
            c = 0
          a = (Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed
          b = (-Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed
          lasta = a
          lastb = b
          if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
            return
          }
          sineCosine(a, b, c)
          for (var i = 0; i < mcList.length; i++) {
            if (mcList[i].on) {
              continue
            }
            var rx1 = mcList[i].cx
            var ry1 = mcList[i].cy * ca.value + mcList[i].cz * -sa.value
            var rz1 = mcList[i].cy * sa.value + mcList[i].cz * ca.value
            var rx2 = rx1 * cb.value + rz1 * sb.value
            var ry2 = ry1
            var rz2 = rx1 * -sb.value + rz1 * cb.value
            var rx3 = rx2 * cc.value + ry2 * -sc.value
            var ry3 = rx2 * sc.value + ry2 * cc.value
            var rz3 = rz2
            mcList[i].cx = rx3
            mcList[i].cy = ry3
            mcList[i].cz = rz3
            per.value = d / (d + rz3)
            mcList[i].x = howElliptical * rx3 * per.value - howElliptical * 2
            mcList[i].y = ry3 * per.value
            mcList[i].scale = per.value
            var alpha = per.value
            alpha = (alpha - 0.6) * (10 / 6)
            mcList[i].alpha = alpha * alpha * alpha - 0.2
            mcList[i].zIndex = Math.ceil(100 - Math.floor(mcList[i].cz))
          }
          var l = oDiv.offsetWidth / 2
          var t = oDiv.offsetHeight / 2
          for (var i = 0; i < mcList.length; i++) {
            if (mcList[i].on) {
              continue
            }
            var aAs = aA[i].style
            if (mcList[i].alpha > 0.1) {
              if (aAs.display != '') aAs.display = ''
            } else {
              if (aAs.display != 'none') aAs.display = 'none'
              continue
            }
            const left3 = mcList[i].cx + l - mcList[i].offsetWidth / 2
            aAs.top = mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px'
            if (mcList[i].offsetWidth + left3 > 394) {
              aAs.left = left3 - (left3 + mcList[i].offsetWidth - 394) + 'px'
            } else {
              aAs.left = left3 + 'px'
            }
            //aAs.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';
            //aAs.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+100*mcList[i].alpha+")";
            aAs.filter = 'alpha(opacity=' + 100 * mcList[i].alpha + ')'
            aAs.zIndex = mcList[i].zIndex
            aAs.opacity = mcList[i].alpha
          }
        }, 40)
      })()
    })
  })
}

onActivated(() => {
  const flag = usePermissionStore().routes.find((i) => i.name == 'Screen')
  if (!flag) {
    return
  }
  init()
  timer.value = setInterval(() => {
    init()
  }, 30000)
})

onDeactivated(() => {
  clearInterval(timer.value)
})

onUnmounted(() => {
  clearInterval(timer.value)
})
</script>
<style lang="scss" scoped>
a {
  color: #444;
  text-decoration: none;
}
#tagscloud {
  width: 400px;
  height: 164px;
  position: relative;
  //background: no-repeat center / contain
  // url('https://img0.baidu.com/it/u=3113157945,7869417&fm=253&fmt=auto&app=120&f=JPEG');
  width: 400px;
  height: 164px;
  // background: rgba(92, 137, 237, 0.16);
  border-radius: 0px 0px 0px 0px;
  // border: 3px solid rgba(126, 166, 255, 0.38);
  overflow: hidden;
}
#tagscloud a {
  position: absolute;
  top: 0px;
  left: 0px;
  color: #333;
  font-family: Arial;
  text-decoration: none;
}
#tagscloud a {
  margin: 0 10px 15px 0;
  text-align: center;
  font-size: 12px;
  white-space: nowrap;
  display: inline-block;
  border-radius: 3px;
}
.rank-title {
  padding-left: 51px;
  width: 332px;
  height: 38px;
  color: #fff;
  font-family: 'HarmonyOS Sans SC';
  font-size: 20px;
  font-weight: bold;
  line-height: 38px; /* 92.308% */
  background-image: url('../../assets/images/title-l-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-bottom: 30px;
  margin-top: 17px;
}
</style>
